<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_setting.bindOther }}</view>
				<view></view>
			</view>
			<!-- 分割线 -->
			<u-gap height="1" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>
		</view>
		
		<!-- 内容 -->
		<view>
			<view
			v-for="(item, index) in navs"
			:key="index"
			style="padding: 0 16rpx 0 16rpx;"
			>
				<view
				:style="{
					borderTop: `${ index > 0 ? 2 : 0 }rpx solid #f9f9f9`
				}"
				class="bg-white flex-center-between u-p-24 u-f-34 u-lh-48"
				@click="changeAction(item)"
				>
					<view>{{ lang_setting[item.key] }}</view>
					
					<view class="flex-center">
						<view
						v-if="typeof item.format === 'function'"
						class="u-m-r-18 color-grew">{{ item.tipsKey && lang_setting[item.tipsKey] || item.format() }}</view>
						<image
						src="@/static/image/common/arrow_right.png"
						style="width: 12rpx; height: 24rpx;"
						class="clear-flex"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			// 初始化导航
			let navs = [
					{ key: 'google', label: 'Google账号', tipsKey: 'toBind', format: () => '去绑定' },
					{ key: 'facebook', label: 'Facebook账号', tipsKey: 'toBind',format: () => '去绑定' },
					{ key: 'apple', label: 'Apple账号', tipsKey: 'toBind',format: () => '去绑定' },
				].map(item => {
					let result = {
						...item
					}
					return result
				})
			return {
				navs
			}
		},
		created() {

		},
		methods: {
			changeAction(item) {
				console.log(item)
			}
		}
	}
</script>

<style scoped lang="scss">

</style>
